import React from 'react'

let timer
let timer2 
class Carousel extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            move: 0,
        }
    }
    componentDidMount() {
        let move = 0;
        let MOVE
        const start = this.props.start
        if (start === 'top') {
            MOVE = this.props.style.height;
        } else if (start === 'left') {
            MOVE = this.props.style.width;
        }
        const that = this
        const timeout = Number(that.props.Duration) * 1000
        timer = setInterval(function () {
            move = move + MOVE;
            that.setState({
                move: -move
            })
            timer2 = setTimeout(() => {
                if (move >= (that.props.list.length - 1) * MOVE) {
                    move = 0
                }
                that.setState({
                    move: -move
                })
                clearTimeout(timer2)
            }, timeout);
        }, 5000)
    }
    componentWillUnmount() {
        clearInterval(timer)
        clearTimeout(timer2)
    }
    render() {
        const { list, style = {}, Transform, Duration, TimingFunction, start } = this.props
 
        return (

            <div
                style={{
                    position: 'relative',
                    overflow: 'hidden',
                    height: '28px',
                    ...style
                }}
            >
                <div
                    style={{
                        position: 'absolute',
                        left: start === 'left' ? this.state.move + 'px' : 0,
                        top: start === 'top' ? this.state.move + 'px' : 0,
                        transition: this.state.move === 0 ? '' : 'all ' + Duration + 's ' + TimingFunction,
                        transform: 'translate' + Transform + '()',
                    }}
                >
                    {
                        list.map((item, index) => {
                            return (<div key={index}>{item.title}</div>)
                        })
                    }
                </div>
            </div>

        )
    }

}

export default Carousel
